<template>
	<view class="container">
		<z-paging ref="paging" v-model="billList" @query="queryList" :auto="false">
			<view slot="top">
				<view style="background-color: #ffffff">
					<view class="search-box">
						<u-search
							placeholder="请输入关键字搜索"
							v-model="formData.remarks"
							:show-action="false"
							:clearabled="true"
							:animation="false"
							shape="round"
							bgColor="#F5F6FA"
							height="72rpx"
							searchIconColor="#999999"
							placeholderColor="#999999"
							@change="$u.debounce(refreshList, 500)"
							:inputStyle="{
								color: '#333333',
								backgroundColor: '#F5F6FA'
							}"
						>
						<u-icon slot="action" name="plus-circle" size="20" color="#FE4F04" @click="navigatorToAdd"></u-icon>
						</u-search>
					</view>
					<!-- tab切换 -->
					<u-tabs
						:list="tabsList"
						:current="tabsIndex"
						:scrollable="false"
						@change="tabsChange"
						lineWidth="20"
						lineColor="#f56c6c"
						:activeStyle="{
							color: '#000',
							fontWeight: 'bold',
							transform: 'scale(1.05)'
						}"
						lineHeight="4"
					></u-tabs>
				</view>
			</view>
			<u-checkbox-group shape="circle" activeColor="#fe4f04" v-model="selectbillList">
				<view class="room-list">
					<view v-for="(item, index) in billList" :key="index" class="room-item">
						<view class="room-item-con" @click="jump('/pages-landlord/ledger/edit?id=' + item.id)">
							<view class="checkbox-group" v-if="showSelect">
								<u-checkbox :name="item.id"></u-checkbox>
							</view>
							<view class="room-info">
								<view class="room-number">{{ item.str_type }}</view>
								<view class="room-address">{{ item.in_date }}</view>
								<view class="room-details">{{ item.remarks }}</view>
							</view>
							<view class="room-status">
								<view class="price">
									<text class="current-price">{{ item.money }}元</text>
								</view>
								<view class="date">{{ item.account_str || item.arrount_str }}</view>
								<view class="status-tag" :class="item.status === 2 ? 'font-color-green' : ''">
									<text>
										<!-- 0-待审核 1-待支付 2-已支付 -->
										{{ item.status_str }}
									</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</u-checkbox-group>
			<view slot="bottom">
				<view class="safe-bottom action-bar" v-if="showSelect">
					<view class="radio-group">
						<image src="/pages-landlord/static/room/icon-xuan.png" v-if="isAllSelect" @click="changeAllSelect"></image>
						<image src="/pages-landlord/static/room/icon-xuan1.png" v-if="!isAllSelect" @click="changeAllSelect"></image>
					</view>
					<view class="action-item" @click="handleAudit">审核</view>
					<view class="action-item" @click="handleDelete">删除</view>
					<view class="action-item" @click="showSelect = false">取消</view>
				</view>
				<view class="safe-bottom action-bar" v-if="!showSelect">
					<view class="action-item" @click="handleBatch">批量</view>
					<view class="action-item">{{ buildingName }}</view>
					<view class="action-item" @click="handleFilter">筛选</view>
				</view>
			</view>
		</z-paging>
		<u-popup :show="showPopup" mode="bottom" :closeOnClickOverlay="false" round="40rpx">
			<view class="filter-modal">
				<view class="header">
					<text @click="handleCancel">取消</text>
					<text style="font-weight: bold">筛选</text>
					<text class="confirm" @click="handleConfirm">确认</text>
				</view>
				<view class="fill-box"></view>
				<view class="section-box">
					<view class="title">类型</view>
					<view class="radio-range">
						<view class="radio-item" :class="item.value === formData.type ? 'active' : ''" v-for="item in typeList"
							:key="item.value" @click="formData.type = item.value">
							{{item.label}}
						</view>
					</view>
				</view>
				<view class="section-box">
					<view class="title">分类</view>
					<view class="classify-data" @click="selectSzclassify">
						<view class="" v-if="formData.classify_id" style="padding: 10rpx 0 20rpx 0;">
							{{formData.classify_name}}
						</view>
						<view class="" v-else style="padding: 10rpx 0 20rpx 0;color: #aaa;">
							点击选择分类
						</view>
					</view>
				</view>
				<view class="section-box">
					<view class="title">日期</view>
					<view class="date-range">
						<view class="date-item" @click="showStartDate = true">
							<view v-if="formData.str_in_date">{{ formData.str_in_date }}</view>
							<view class="placeholder" v-if="!formData.str_in_date">请选择</view>
						</view>
						<text>至</text>
						<view class="date-item" @click="showEndDate = true">
							<view v-if="formData.end_in_date">{{ formData.end_in_date }}</view>
							<view class="placeholder" v-if="!formData.end_in_date">请选择</view>
						</view>
					</view>
				</view>
				<view class="section-box">
					<view class="title">排序</view>
					<view class="radio-range">
						<view class="radio-item" :class="formData.in_date_order === 'desc'? 'active' : ''" @click="formData.in_date_order = 'desc'">
							按日期倒序
						</view>
						<view class="radio-item" :class="formData.in_date_order === 'asc' ? 'active' : ''" @click="formData.in_date_order = 'asc'">
							按日期升序
						</view>
					</view>
				</view>
				<view class="section-box">
					<view class="title">状态</view>
					<view class="radio-range">
						<view class="radio-item" :class="formData.status === '-1' ? 'active' : ''" @click="formData.status = '-1'">
							全部
						</view>
						<view class="radio-item" :class="formData.status === '0' ? 'active' : ''" @click="formData.status = '0'">
							待审
						</view>
						<view class="radio-item" :class="formData.status === '1' ? 'active' : ''" @click="formData.status = '1'">
							已审
						</view>
					</view>
				</view>
				
			</view>
			<u-datetime-picker :show="showStartDate" v-model="startDate" mode="date" @confirm="onStartDateConfirm" @cancel="onStartDateCanceel" />
			<u-datetime-picker :show="showEndDate" v-model="endDate" mode="date" @confirm="onEndDateConfirm" @cancel="onEndDateCanceel" />
		</u-popup>
	</view>
</template>
<script>
import { getSzinfo,upSzinfoStatus,deleteSzinfo} from  '@/api/ledger.js'
export default {
	data() {
		return {
			sortConfig: {
				sort: '', //排序，房号：room_name，账期：day，金额：money
				way: '' // 'asc' | 'desc' | ''
			},
			buildingName: '',
			tabsList: [
				{
					id: '',
					name: '全部'
				},
				{
					id: 2,
					name: '收入'
				},
				{
					id: 1,
					name: '支出'
				}
			],
			tabsIndex: 0,
			showSelect: false,
			selectbillList: [],
			isAllSelect: false,
			billList: [],
			showPopup: false,
			showStartDate: false,
			showEndDate: false,
			originalKw: '',
			formData: {
				status: '-1', //状态：-1 全部 0 未审核 1已审核
				remarks: '',
				type:'',
				house_id:'',
				classify_id :'',
				in_date_order:'desc',
				str_in_date: '',
				end_in_date: '',
			},
			startDate: new Date(),
			endDate: new Date(),
			typeList: [{
				value: '1',
				label: '支出'
			}, {
				value: '2',
				label: '收入'
			}, {
				value: '3',
				label: '转账'
			}, {
				value: '4',
				label: '借贷'
			}],
			propertyTypes: [
				{
					text: '全部',
					value: 1
				},
				{
					text: '出租',
					value: 2
				},
				{
					text: '普通',
					value: 3
				},
				{
					text: '退房',
					value: 4
				}
			],
			statusOptions: [
				{
					text: '全部',
					value: 0
				},
				{
					text: '待审',
					value: 1
				},
				{
					text: '代收',
					value: 2
				},
				{
					text: '已收',
					value: 3
				}
			],
			personTypes: [
				{
					text: 'TT',
					value: 1
				},
				{
					text: '22',
					value: 2
				},
				{
					text: '1室0厅1卫',
					value: 3
				},
				{
					text: '3室1厅',
					value: 4
				},
				{
					text: '4室1厅',
					value: 5
				}
			],
			total: 0
		}
	},

	onLoad(options) {
		if (options.remarks) {
			this.formData.remarks = options.remarks
		}
		if (options.room_id) {
			this.formData.room_id = options.room_id
			this.originalKw = options.remarks || ''
		}
		if (options.building_id) {
			this.formData.build_id = options.building_id
			this.buildingName = options.building_name || '全部大楼'
		}
		if (options.status) {
			this.formData.status = options.status
			this.tabsIndex = Number(options.status)
		}
		if (options.start) {
			this.formData.str_in_date = options.start
		}
		if (options.house_id) {
			this.formData.house_id = options.house_id
		}
	},
	onUnload() {
		uni.$off('selectBuilding') // 清除事件监听
	},
	onShow() {
		uni.$on('selectBuilding', (building) => {
			this.formData.build_id = building.id
			this.buildingName = building.name
		})
		uni.$on('szclassifySelected', (szclassify) => {
			console.log('szclassifySelected：', szclassify)
			this.formData.classify_id = szclassify.id
			this.formData.classify_name = szclassify.name
		});
		this.refreshList()
	},
	watch: {
		selectbillList(newVal) {
			if (newVal.length) {
				this.isAllSelect = newVal.length === this.billList.length
			}
		},
		'formData.remarks'(val) {
			if (val !== this.originalKw) {
				this.formData.room_id = 0
			}
		}
	},
	methods: {
		navigatorToAdd(){
			uni.navigateTo({
				url:'/pages-landlord/ledger/edit?house_id='+this.formData.house_id
			})
		},
		handledate_type(item) {
			this.formData.date_type = item.value
		},
		handleStatus(item) {
			this.formData.status = item.value
		},
		handlePropertyType(item) {
			this.formData.propertyType = item.value
		},
		handleRoomType(item) {
			this.formData.roomType = item.value
		},
		onStartDateConfirm(event) {
			this.startDate = event.value
			//格式化时间戳YYYY-MM-DD
			this.formData.str_in_date = uni.$u.timeFormat(event.value, 'yyyy-mm-dd')
			this.showStartDate = false
		},
		onStartDateCanceel() {
			this.startDate = ''
			this.formData.str_in_date = ''
			this.showStartDate = false
		},
		onEndDateConfirm(event) {
			this.endDate = event.value
			//格式化时间戳YYYY-MM-DD
			this.formData.end_in_date = uni.$u.timeFormat(event.value, 'yyyy-mm-dd')
			this.showEndDate = false
		},
		onEndDateCanceel() {
			this.endDate = ''
			this.formData.end_in_date = ''
			this.showEndDate = false
		},
		handleCancel() {
			this.startDate = ''
			this.endDate = ''
			this.formData = {
				status: '-1', //状态：-1 全部 0 未审核 1已审核
				remarks: '',
				type:'',
				house_id: this.formData.house_id,
				classify_id :'',
				in_date_order:'desc',
				str_in_date: '',
				end_in_date: '',
			}
			this.showPopup = false
			this.refreshList()
		},
		handleConfirm() {
			this.showPopup = false
			this.refreshList()
		},
		selectSzclassify(){
			uni.navigateTo({
				url:'/pages-landlord/ledger/szclassify'
			})
		},
		refreshList() {
			this.showSelect = false
			if (this.$refs.paging) {
				this.$refs.paging.refresh()
			}
		},
		queryList(pageNo, pageSize) {
			getSzinfo({
				...this.formData,
				...this.sortConfig,
				page: pageNo,
				page_size: pageSize
			}).then((res) => {
					console.log('getSzinfo:', res.data.data)
					let data = res.data.data
					this.total = data.data.total
					this.tabsList[0].name = `共${this.total}笔`
					this.tabsList[1].name = `收入(${data.sr_money})`
					this.tabsList[2].name = `支出(${data.zc_money})`
					let list = data.data.data.map(d=>{
						return {
							...d, 
							createtime_text:uni.$u.timeFormat(d.createtime, 'yyyy-mm-dd')
						}
					})
					this.$refs.paging.complete(list)
				})
				.catch((res) => {
					console.log(res)
					this.$refs.paging.complete(false)
				})
		},
		handleSort(sort) {
			if (this.sortConfig.sort === sort) {
				this.sortConfig.way = this.sortConfig.way === 'asc' ? 'desc' : 'asc'
			} else {
				this.sortConfig.sort = sort
				this.sortConfig.way = 'asc'
			}
			this.refreshList()
		},
		tabsChange(e) {
			console.log(e)
			this.showSelect = false
			this.billList = []
			this.selectbillList = []
			this.tabsIndex = e.index
			this.formData.type = this.tabsList[e.index].id
			this.refreshList()
		},
		handleBatch() {
			this.showSelect = true
			this.selectbillList = []
		},
		handleAll() {
			this.$Tips('/pages-landlord/select-building/select-building')
		},
		handleFilter() {
			console.log('筛选')
			this.showPopup = true
		},
		changeAllSelect() {
			this.isAllSelect = !this.isAllSelect
			if (this.isAllSelect) {
				this.selectbillList = this.billList.map((option) => option.id)
			} else {
				this.selectbillList = []
			}
		},
		handleAudit() {
			let that = this
			console.log('审核')
			if (this.selectbillList.length == 0) {
				return this.$Toast('未选择账单')
			}
			uni.showModal({
				confirmColor: '#FE4F04',
				content: '确定审核所选账单吗？',
				success(res) {
					if (res.confirm) {
						let ids = that.selectbillList.join(',')
						that.audit(ids)
					}
				}
			})
		},
		handleDelete() {
			console.log('删除')
			let that = this
			if (this.selectbillList.length == 0) {
				return this.$Toast('未选择账单')
			}
			uni.showModal({
				confirmColor: '#FE4F04',
				content: '确定删除所选账单吗？',
				success(res) {
					if (res.confirm) {
						let ids = that.selectbillList.join(',')
						that.del(ids)
					}
				}
			})
		},
		handleSuccess() {
			this.$Toast('操作成功')
			this.refreshList()
		},
		//审核
		audit(ids) {
			upSzinfoStatus({
				ids: ids
			}).then((res) => {
				this.handleSuccess()
			})
		},
		del(ids) {
			deleteSzinfo({
				ids: ids
			}).then((res) => {
				this.handleSuccess()
			})
		},
		// 路由跳转
		jump(url) {
			uni.navigateTo({
				url: url
			})
		}
	}
}
</script>
<style lang="scss" scoped>
.filter-modal {
	background: #fff;
	border-radius: 40rpx 40rpx 0 0;
	overflow-y: scroll;

	.header {
		position: fixed;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 40rpx;
		box-sizing: border-box;
		height: 120rpx;
		border-radius: 40rpx 40rpx 0 0;
		border-bottom: 1px solid #eee;
		background: #ffffff;
		z-index: 100;

		.confirm {
			color: #fe4f04;
		}
	}

	.fill-box {
		height: 120rpx;
	}

	.section-box {
		padding: 0 20rpx;
		margin: 20rpx 0 40rpx;
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid #eee;
		.title {
			font-size: 28rpx;
			color: #222222;
			font-weight: 600;
			width: 100rpx;
		}
	}

	.date-range {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 20rpx;

		input {
			flex: 1;
			height: 68rpx;
			border-radius: 40rpx;
			line-height: 68rpx;
			padding: 0 20rpx;
			margin-right: 20rpx;
		}

		.date-item {
			width: 262rpx;
			height: 68rpx;
			border-radius: 40rpx;
			line-height: 68rpx;
			text-align: center;

			.placeholder {
				font-size: 28rpx;
				color: #999999;
			}
		}

		text {
			font-weight: 400;
			font-size: 28rpx;
			color: #222222;
			text-align: center;
		}
	}
	.radio-range {
		display: flex;
		align-items: center;
		gap: 20rpx;
		padding-bottom: 10rpx;
		.radio-item {
			padding: 10rpx 20rpx;
			border: 1rpx solid #f3f3f3;
			background-color: #f3f3f3;
		}
		.radio-item.active {
			border: 1rpx solid #9cd566;
			color: #9cd566;
		}
	}
}

.container {
	display: flex;
	flex-direction: column;
	height: 100%;
	background-color: #f5f6f7;
}

.search-box {
	padding: 24rpx 32rpx;

	:deep(.u-search) {
		background-color: #ffffff !important;
		border-radius: 36rpx;
		box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.05);

		.u-search__content {
			background-color: #ffffff !important;
			height: 72rpx;
			padding: 0 30rpx;

			.u-search__content__icon {
				margin-right: 8rpx;
			}

			.u-search__content__input {
				font-size: 28rpx;
			}
		}
	}
}

.font-color-red {
	color: #ff0000 !important;
}

.font-color-green {
	color: #2faa4e;
}

.btn-red {
	color: #ff0000;
	border-color: #ff0000 !important;
}

.room-list {
	flex: 1;
	overflow: auto;
	padding: 20rpx;

	.room-item {
		background-color: #ffffff;
		padding: 30rpx;
		border-radius: 12rpx;
		margin-bottom: 20rpx;

		.room-item-con {
			display: flex;
			align-items: center;

			.checkbox-group {
				margin-right: 32rpx;
			}

			.radio-group {
				display: flex;
				align-items: center;
				width: 70rpx;

				image {
					width: 36rpx;
					height: 36rpx;
				}
			}

			.room-info {
				flex: 1;

				.t3 {
					margin-top: 12rpx;
					font-size: 26rpx;
					color: #333333;

					.t4 {
						margin-left: 10rpx;
					}
				}
			}

			.room-number {
				font-size: 30rpx;
				color: #333333;
				font-weight: 500;
				margin-bottom: 12rpx;
			}

			.room-address {
				font-size: 26rpx;
				color: #444444;
				margin-bottom: 8rpx;
			}

			.room-details {
				font-size: 20rpx;
				color: #999999;
			}

			.room-status {
				text-align: right;
			}

			.price {
				margin-bottom: 8rpx;
			}

			.original-price {
				font-size: 24rpx;
				color: #d1d2d4;
				text-decoration: line-through;
				margin-right: 8rpx;
			}

			.current-price {
				font-size: 28rpx;
				color: #fe4f04;
				font-weight: 500;
			}

			.date {
				font-size: 26rpx;
				color: #666666;
				margin-bottom: 8rpx;
			}

			.status-tag {
				display: inline-flex;
				align-items: center;
				background-color: #f0f9eb;
				padding: 4rpx 12rpx;
				border-radius: 4rpx;
			}

			.status-tag text {
				font-size: 12px;
				color: #67c23a;
				margin-left: 4rpx;
			}
		}
	}

	.room-bottom {
		display: flex;
		justify-content: flex-end;
		margin-top: 20rpx;

		.btn {
			border: 1px solid #d1d2d4;
			border-radius: 28rpx;
			margin-left: 16rpx;
			padding: 8rpx 32rpx;
		}
	}
}

.action-bar {
	width: 100%;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-around;
	padding: 20rpx 32rpx;
	background-color: #ffffff;

	.radio-group {
		display: flex;
		align-items: center;
		width: 70rpx;

		image {
			width: 36rpx;
			height: 36rpx;
		}
	}

	.action-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		flex: 1;
		text-align: center;
	}
}
</style>